<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:include="include :: header"></head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-lg-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>轮播图点击量统计</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div id="echarts_carouselMap" style="width: 100%;height: 300px"></div>
                    </div>

                </div>
            </div>
            <div class="col-lg-6">
                <div class="ibox-title">
                    <h5>爬虫统计仪表盘</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div id="echarts_pspider" style="width: 100%;height: 300px"></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>博客点击量统计图表</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-lg-9">
                                <div id="echarts_blog" style="width: 100%;height: 500px"></div>
                            </div>
                            <div class="col-lg-3 " style="margin-top: 100px">
                                <label class="label label-default" style="margin-top: 10px">博文创建时间： </label>
                                <hr/>
                                <div class="form-group">
                                    <input type="text" class="form-control input-lg time-input"
                                           id="startTime"
                                           placeholder="开始时间" name="params[beginTime]"/>
                                </div>
                                <div class="form-group">
                                    <input type="text" class="form-control input-lg  time-input"
                                           id="endTime"
                                           placeholder="结束时间" name="params[endTime]"/>
                                </div>

                                <a class="btn btn-primary btn-rounded btn-sm"
                                   onclick="initBlogDataCustom()"><i
                                        class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm"
                                   onclick="reset('#startTime','#endTime')"><i
                                        class="fa fa-refresh"></i>&nbsp;重置</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>访客统计</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-lg-9">
                                <div class="">
                                    <div id="echarts_visit" style="width: 100%;height: 450px"></div>
                                </div>
                            </div>
                            <div class="col-lg-3 " style="margin-top: 100px">
                                <label class="label label-default" style="margin-top: 10px">访客访问时间： </label>
                                <hr/>
                                <div class="form-group">
                                    <input type="text" class="form-control input-lg time-input"
                                           id="startTimeVisit"
                                           placeholder="开始时间"/>
                                </div>
                                <div class="form-group">
                                    <input type="text" class="form-control input-lg  time-input"
                                           id="endTimeVisit"
                                           placeholder="结束时间"/>
                                </div>

                                <a class="btn btn-primary btn-rounded btn-sm"
                                   onclick="initVisitCustom()"><i
                                        class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm"
                                   onclick="reset('#startTimeVisit','#endTimeVisit')"><i
                                        class="fa fa-refresh"></i>&nbsp;重置</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include :: footer"></div>

<script src="/static/ajax/libs/echarts/echarts.min.js"
        th:src="@{/ajax/libs/echarts/echarts.min.js}"></script>
<script>

    /**
     * 清空输入框数据
     */
    function reset(startTime, startTime) {
        $(startTime).val("");
        $(startTime).val("");
    }


    $(function () {
        //初始化轮播图点击量柱状图
        initCarouselMap();
        //填充数据导轮播图柱状图
        fixCarouselMap();
        //初始化爬虫统计饼图
        initSpider();
        //填充数据导爬虫饼图
        fixSpider();
        //初始化博客统计柱状图
        initBlog();
        //填充数据到博客统计柱状图
        fixBlog();
        //初始化访客记录折线图
        initVisit();
        //填充数据到折线图
        fixVisit();
        //页面大小改变重新渲染图表
        window.onresize = function () {
            carouselMap_echarts_instance.resize();
            echarts_pspider.resize();
            echarts_blog_instance.resize();
        };
    });
    //柱状图实例
    var carouselMap_echarts_instance;
    //饼状图爬虫实例
    var echarts_pspider;
    //博客点击量柱状图实例
    var echarts_blog_instance;
    //访客折线图实例
    var echarts_visit_instance;

    function initBlogDataCustom() {
        echarts_blog_instance.clear();
        initBlog();
        fixBlog($("#startTime").val(), $("#endTime").val());
    }

    function initVisitCustom() {
        echarts_visit_instance.clear();
        initVisit();
        fixVisit($("#startTimeVisit").val(), $("#endTimeVisit").val());
    }

    function initVisit() {
        echarts_visit_instance = echarts.init(document.getElementById('echarts_visit'));
        option = {
            grid: {
                x: 45,
                y: 45,
                x2: 45,
                y2: 45,
            },
            title: {
                text: '前台访问量统计',
                left: 'center',
                subtext: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['访问量']
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: {
                        readOnly: false
                    },
                    magicType: {
                        type: ['line', 'bar']
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: []
            },
            yAxis: {
                type: 'value',
            },
            series: [{
                name: '当日访问量',
                type: 'line',
                data: [],
                markPoint: {
                    data: [{
                        type: 'max',
                        name: '最大值'
                    },
                        {
                            type: 'min',
                            name: '最小值'
                        }
                    ]
                },
                markLine: {
                    data: [{
                        type: 'average',
                        name: '平均值'
                    }]
                }
            }]
        };
        echarts_visit_instance.showLoading();
        echarts_visit_instance.setOption(option);
    }

    function fixVisit(startTime, endTime) {
        $.ajax({
            url: "/chart/business/visitData?startTime=" + startTime + "&endTime=" + endTime,
            type: "get",
            success: function (result) {
                echarts_visit_instance.hideLoading();
                if (result.code == 0) {
                    var xAxiss = new Array();
                    var yAxiss = new Array();
                    $.each(result.data, function (index, obj) {
                        xAxiss[index] = obj.name;
                        yAxiss[index] = obj.value;
                    });
                    echarts_visit_instance.setOption({
                        xAxis: {
                            data: xAxiss
                        },
                        series: [
                            {
                                data: yAxiss
                            }
                        ]
                    });
                }
            }
        });
    }

    function initBlog() {
        echarts_blog_instance = echarts.init(document.getElementById('echarts_blog'));
        option = {
            title: {
                text: '',
            },
            legend: {
                name: [],
            },
            // tooltip（提示框组件）
            tooltip: {
                //trigger(触发类型)，可选'item','axis','none'
                trigger: 'axis',
                axisPointer: {
                    //指示器类型,可选'line','shadow','cross'
                    type: 'shadow'
                }
            },
            // toolbox,echarts自带工具
            toolbox: {
                show: true,
                feature: {
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            xAxis: {
                type: 'category',
                data: [],
                axisLabel: {
                    show: true,
                    interval: 0,      //坐标轴刻度标签的显示间隔(在类目轴中有效) 0:显示所有  1：隔一个显示一个 :3：隔三个显示一个...
                    rotate: -30,    //标签倾斜的角度，显示不全时可以通过旋转防止标签重叠（-90到90）
                    formatter: function (name) {
                        return (name.length > 6 ? (name.slice(0, 6) + "...") : name);
                    },
                },
                triggerEvent: true,
                splitLine: {
                    show: true
                },
                axisLine: {
                    show: true,
                },
                axisTick: {
                    show: true
                },
            },
            yAxis: [{
                name: '点击量',
                type: 'value',
                splitLine: {
                    show: true
                },
                //axisTick 坐标轴刻度相关设置
                axisTick: {
                    show: true
                },
                //axixLine 坐标轴轴线相关设置

                //axisLabel 坐标轴刻度标签的相关设置
                axisLabel: {
                    show: true,
                }
            },],
            series: [{
                name: '博文点击量',
                type: 'bar',
                data: [],
                barWidth: '30%',
                //markPoint 图表标注
                markPoint: {
                    //标记图形的大小
                    symbolSize: 60,
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    label: {
                        formatter: '{b}：{c}'
                    },
                    data: [{
                        name: '点击量',
                        type: 'average',
                    }],
                },
            },]
        };
        extension(echarts_blog_instance);
        echarts_blog_instance.showLoading();
        echarts_blog_instance.setOption(option);
    }

    function extension(line) {
        var id = document.getElementById("extension");
        if (!id) {
            var div = "<div id = 'extension' sytle=\"display:none\"></div>"
            $('html').append(div);
        }
        line.on('mouseover', function (params) {
            if (params.value.length >= 5) {
                $('#extension').css({
                    "position": "absolute",
                    fontSize: '20',
                    color: '#000000',
                    "display": "inline"
                }).text(params.value);
                $("html").mousemove(function (event) {
                    var xx = event.pageX + 15;
                    var yy = event.pageY - 20;
                    $('#extension').css('top', yy).css('left', xx);
                });
            }
        });
        line.on('mouseout', function (params) {
            if (params.value.length >= 5) {
                $('#extension').css('display', 'none');
            }
        });
    }


    function fixBlog(startTime, endTime) {
        $.ajax({
            url: "/chart/business/blogClickData?startTime=" + startTime + "&endTime=" + endTime,
            type: "get",
            success: function (result) {
                if (result.code == 0) {
                    echarts_blog_instance.hideLoading();
                    var xAxiss = new Array();
                    var yAxiss = new Array();
                    $.each(result.data, function (index, obj) {
                        xAxiss[index] = obj.name;
                        yAxiss[index] = obj.value;
                    });
                    echarts_blog_instance.setOption({
                        xAxis: {
                            data: xAxiss
                        },
                        series: [
                            {
                                data: yAxiss
                            }
                        ]
                    });
                }
            }
        })
    }

    function initSpider() {
        echarts_pspider = echarts.init(document.getElementById('echarts_pspider'));
        var option = {
            toolbox: {
                show: true,
                feature: {
                    dataView: {show: true, readOnly: false},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            title: {
                text: '爬虫访问统计',
                subtext: '',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                //左上角数据
                data: []
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '70%',
                    center: ['50%', '60%'],
                    data: [],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        echarts_pspider.showLoading();
        echarts_pspider.setOption(option);
    }

    function fixSpider() {
        $.ajax({
            url: "/chart/business/spiderData",
            type: "get",
            success: function (result) {
                if (result.code == 0) {
                    echarts_pspider.hideLoading();
                    echarts_pspider.setOption({
                        legend: {
                            data: result.data
                        },
                        series: [
                            {
                                data: result.data
                            }
                        ]
                    });
                }
            }
        })
    }

    function initCarouselMap() {
        carouselMap_echarts_instance = echarts.init(document.getElementById('echarts_carouselMap'));
        option = {
            title: {
                text: '',
            },
            legend: {
                name: [],
            },
            // tooltip（提示框组件）
            tooltip: {
                //trigger(触发类型)，可选'item','axis','none'
                trigger: 'axis',
                axisPointer: {
                    //指示器类型,可选'line','shadow','cross'
                    type: 'shadow'
                }
            },
            // toolbox,echarts自带工具
            toolbox: {
                show: true,
                feature: {
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            xAxis: {
                type: 'category',
                data: [],
                axisLabel: {
                    show: true,
                },
                splitLine: {
                    show: true
                },
                axisLine: {
                    show: true,
                },
                axisTick: {
                    show: true
                },
            },
            yAxis: [{
                name: '点击量',
                type: 'value',
                splitLine: {
                    show: true
                },
                //axisTick 坐标轴刻度相关设置
                axisTick: {
                    show: true
                },
                //axixLine 坐标轴轴线相关设置

                //axisLabel 坐标轴刻度标签的相关设置
                axisLabel: {
                    show: true,
                }
            },],
            series: [{
                name: '轮播图点击量',
                type: 'bar',
                data: [],
                barWidth: '30%',
                //markPoint 图表标注
                markPoint: {
                    //标记图形的大小
                    symbolSize: 60,
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    label: {
                        formatter: '{b}：{c}'
                    },
                    data: [{
                        name: '点击量',
                        type: 'average',
                    }],
                },
            },]
        };
        carouselMap_echarts_instance.showLoading();
        carouselMap_echarts_instance.setOption(option);
    }

    function fixCarouselMap() {
        $.ajax({
            url: "/chart/business/carouselMapData",
            type: "get",
            success: function (result) {
                if (result.code == 0) {
                    carouselMap_echarts_instance.hideLoading();
                    var xAxiss = new Array();
                    var yAxiss = new Array();
                    $.each(result.data, function (index, obj) {
                        xAxiss[index] = obj.name;
                        yAxiss[index] = obj.value;
                    });
                    console.log(xAxiss)
                    console.log(yAxiss)
                    carouselMap_echarts_instance.setOption({
                        xAxis: {
                            data: xAxiss
                        },
                        series: [
                            {
                                data: yAxiss
                            }
                        ]
                    });
                }
            }
        })
    }

</script>
</body>
</html>
